﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>form</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        body {
            overflow: hidden;
        }
        /* ~~~~~~~ INIT. BTN ~~~~~~~ */
        
        .btn {
            position: relative;
            padding: 1.4rem 4.2rem;
            padding-right: 3.1rem;
            font-size: 1.4rem;
            color: var(--inv);
            letter-spacing: 1.1rem;
            text-transform: uppercase;
            -webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
            transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        .btn:before,
        .btn:after {
            content: '';
            position: absolute;
            -webkit-transition: inherit;
            transition: inherit;
            z-index: -1;
        }
        
        .btn:hover {
            color: var(--def);
            -webkit-transition-delay: .6s;
            transition-delay: .6s;
        }
        
        .btn:hover:before {
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
        }
        
        .btn:hover:after {
            background: var(--inv);
            -webkit-transition-delay: .4s;
            transition-delay: .4s;
        }
        /* From Top */
        
        .from-top:before,
        .from-top:after {
            left: 0;
            height: 0;
            width: 100%;
        }
        
        .from-top:before {
            bottom: 0;
            border: 1px solid var(--inv);
            border-top: 0;
            border-bottom: 0;
        }
        
        .from-top:after {
            top: 0;
            height: 0;
        }
        
        .from-top:hover:before,
        .from-top:hover:after {
            height: 100%;
        }
        /* From Left */
        
        .from-left:before,
        .from-left:after {
            top: 0;
            width: 0;
            height: 100%;
        }
        
        .from-left:before {
            right: 0;
            border: 1px solid var(--inv);
            border-left: 0;
            border-right: 0;
        }
        
        .from-left:after {
            left: 0;
        }
        
        .from-left:hover:before,
        .from-left:hover:after {
            width: 100%;
        }
        /* From Right */
        
        .from-right:before,
        .from-right:after {
            top: 0;
            width: 0;
            height: 100%;
        }
        
        .from-right:before {
            left: 0;
            border: 1px solid var(--inv);
            border-left: 0;
            border-right: 0;
        }
        
        .from-right:after {
            right: 0;
        }
        
        .from-right:hover:before,
        .from-right:hover:after {
            width: 100%;
        }
        /* From Middle */
        
        .from-middle:before {
            top: 0;
            left: 50%;
            height: 100%;
            width: 0;
            border: 1px solid var(--inv);
            border-left: 0;
            border-right: 0;
        }
        
        .from-middle:after {
            bottom: 0;
            left: 0;
            height: 0;
            width: 100%;
            background: var(--inv);
        }
        
        .from-middle:hover:before {
            left: 0;
            width: 100%;
        }
        
        .from-middle:hover:after {
            top: 0;
            height: 100%;
        }
        /* From Bottom */
        
        .from-bottom:before,
        .from-bottom:after {
            left: 0;
            height: 0;
            width: 100%;
        }
        
        .from-bottom:before {
            top: 0;
            border: 1px solid var(--inv);
            border-top: 0;
            border-bottom: 0;
        }
        
        .from-bottom:after {
            bottom: 0;
            height: 0;
        }
        
        .from-bottom:hover:before,
        .from-bottom:hover:after {
            height: 100%;
        }
        /* ~~~~~~~~~~~~ GLOBAL SETTINGS ~~~~~~~~~~~~ */
        
        *,
        *:before,
        *:after {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        body {
            --def: #96B7C4;
            --inv: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 100vh;
            width: 100%;
            background-image: linear-gradient(-25deg, #616161 0%, #96B7C4 100%);
        }
        
        html {
            font-size: 12px;
            font-family: 'Playfair Display', serif;
        }
        
        div {
            margin-bottom: 3rem;
        }
        
        div:last-child {
            margin-bottom: 0;
        }
        
        a {
            text-decoration: none;
        }
    </style>

</head>

<body>
    <h1 style="color: white;">C H O O S E &nbsp; Y O U R &nbsp; F I L E D</h1>
    <br><br><br><br><br><br>
    <a href="ranking_of_singers/index.html">
        <div class="btn from-left">singers</div>
    </a>
    <br><br><br>
    <a href="ranking_of_albums/index.html">
        <div class="btn from-top">albums</div>
    </a>
    <br><br><br>
    <a href="ranking_of_songs/index.html">
        <div class="btn from-right">songs</div>
    </a>
</body>

</html>